<template>
	<view>
		<!--PC端-->
		<view class="d-xianshi-pc">
			<view class="d-kuan-pc">
				<view class="d-xianshi-pc d-kuan-pc-25 d-zuo">
					<view class="d-kuan-60 d-neirong-juzhong">
						<image mode="aspectFill" :src="src" class="d-yuanjiao-10 d-img-35 d-shang-3" style=""></image>
					</view>
				</view>
				<view class="d-kuan-pc-50-100 d-zuo">
					<view class="d-zuoyou-neikuang-10 d-neishang-2">
						<view class="">
							<!-- 搜索 -->
							<view class="d-shang-4 ">
								<u-search v-if="jiansuokais == 1" :clearabled="true" :showAction="false" inputAlign="center" height="35" v-model="searchValue" @search="searchTapjiansuo"></u-search>
								<u-search v-else :clearabled="true" :showAction="false" inputAlign="center" height="35" v-model="searchValue" @search="searchTap"></u-search>
								
							</view>
							
						</view>
					</view>
				</view>
				<view class="d-xianshi-pc d-kuan-pc-25 d-zuo">
					<view class="d-kuan-60 d-box d-zuo">
						<view v-if="value > 0" class="box">
							 <u-badge :type="type" max="99" :value="value" bgColor="#e3310d"></u-badge>
						</view>
						
						<image mode="aspectFill" src="/static/images/img/xiaoxi3.png" class="d-yuanjiao-10 d-img-40 d-shang-3" style="" @click="xiaoxi"></image>
					</view>
					<view v-if="www.avatar" class="d-zuo">
						<image mode="aspectFill" :src="www.avatar" class="d-yuanjiao-50 d-img-40 d-shang-3" style="" @click="xiaoxi"></image>
					</view>
					<view v-else class="d-zuo">
						<image mode="aspectFill" src="/static/images/img/huiyuan.png" class="d-yuanjiao-50 d-img-40 d-shang-3" style="" @click="xiaoxi"></image>
					</view>
					
				</view>
				
				
			</view>
		</view>
		<!--H5端-->
		<view class="d-kuan-baifen-70-cm d-xianshi-h5">
			<view class="d-zuoyou-neikuang-10 d-neishang-3">
				<view class="d-buhuanhang">
					<!-- 搜索 -->
					<view class="d-kuan-60 d-neirong-juzhong">
						<image mode="aspectFill" :src="src" class="d-yuanjiao-10 d-img-35 d-shang-3" style=""></image>
					</view>
					<view class="d-kuan d-shang-2 d-zuo-5 d-you-5">
						<u-search-sou v-if="jiansuokais == 1" bgColor="#f2f1e8" :clearabled="true" :showAction="false" inputAlign="center" height="35" v-model="searchValue" @search="searchTapjiansuo"></u-search-sou>
						<u-search-sou v-else :clearabled="true" bgColor="#f2f1e8" :showAction="false" inputAlign="center" height="35" v-model="searchValue" @search="searchTap"></u-search-sou>
						<!--form catchsubmit="formSubmit" catchreset="formReset" id="search-form">
							<view class="search-box">
								<input @tap="searchTap" id="search-input" name="input" confirm-type="search" class="search-input" placeholder="关键词..."></input>
								<button @confirm="formSubmit" class="search-button" form-type="submit" size="mini" plain="true">
								<icon @confirm="formSubmit" type="search" color="#959595" size="16" />
								</button>
							</view>
						</form-->
					</view>
					<view class="d-kuan-60 d-box">
						<view v-if="value > 0" class="box">
							 <u-badge :type="type" max="99" :value="value" bgColor="#e3310d"></u-badge>
						</view>
						<view class="d-shang-2">
							<u-icon name="plus-circle" color="#c4c6c8" size="40" @click="xiala()"></u-icon>
						</view>
						
						<view class="down_pages d-shang-5" v-show="isDownShow">
							
							<view class="classScreen">
								<view class="screePage" v-for="(item,index) in list" :key="index" @click="choseBtn(item)">
									
									<view class="screImg"  @click="xiala()">
										<image :src="item.imgUrl" mode=""></image>
									</view>
									<view class="screeName"  @click="xiala()">
										{{item.name}}
									</view>
								</view>
							</view>
							<view class="tap"></view>
						</view>
						<!--image mode="aspectFill" src="/static/images/img/xiaoxi3.png" class="d-yuanjiao-10 d-img-40 d-shang-3" style="" ></image-->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	var jiansuokai = config.getJiansuokai;
	export default {
		
		name:"toubu",
		props:{
			src: {
				type: [String, Number],
				default: ''
			},
			www: {
				type: [Array,Object],
				default() {
				  return {};
				}
			},
		},
		data() {
			var duixin = this;
			return {
				searchValue: "",
				type:"success",
				value:0,
				jiansuokais: jiansuokai,
				isDownShow: false, //false
				list: [/*{
						id: 0,
						name: '发起群聊',
						imgUrl: '../../static/images/chat.png'
					},
					{
						id: 1,
						name: '添加朋友',
						imgUrl: '../../static/images/add.png'
					},*/
					{
						id: 2,
						name: '扫一扫',
						imgUrl: '../../static/images/scan.png'
					},
					/*{
						id: 3,
						name: '收付款',
						imgUrl: '../../static/images/pay.png'
					}*/
				]
			};
		},
		components: {

		},
		watch: {
			// 监听搜索框值的变化
			
			searchValue(n, o) {
				//console.log(n);
			}
			
		},
		methods: {
			searchTap() {
				var duixin = this;
				const searchValue = duixin.searchValue; // 获取输入框的值
				
				if (searchValue) {
					uni.navigateTo({
						url: '/pages/quan/sou?k=' + searchValue // 跳转到目标页面并传递搜索关键字参数
					});
					
				}
				
			},
			searchTapjiansuo() {
				var duixin = this;
				const searchValue = duixin.searchValue; // 获取输入框的值
				
				if (searchValue) {
					uni.navigateTo({
						url: '/pages/jiansuo/index?k=' + searchValue // 跳转到目标页面并传递搜索关键字参数
					});
					
				}
				
			},
			xiaoxi() {
				uni.switchTab({
					url: '/pages/xiaoxi/index' // 跳转到目标页面并传递搜索关键字参数
				});
			},
			choseBtn(data) {
				this.$emit('choseBtn', data)
				//console.log("erweima",data);
			},
			xiala(){
				if(this.isDownShow){
					this.isDownShow = false
				} else {
					this.isDownShow = true
				}
				
			}
		}
	}
</script>

<style lang="scss">
@import "./toubu.css";
.down_pages {
		position: absolute;
		right: 10px;
		z-index: 999;

		.classScreen {
			width: 125px;
			/*height: 184px;*/
			background-color: #4C4C4C;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			line-height: 30px;
			z-index: 99;
			overflow: hidden;
			box-sizing: border-box;

			.screePage {
				height: 35px;
				border-bottom: 1px solid #5b5b5b;
				display: flex;
				align-items: center;
				padding: 5px;

				.screImg {
					width: 28px;
					height: 28px;
					padding-left: 2px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.screeName {
					margin-left: 10px;
					font-size: 32rpx;
				}
			}
		}
	}

	.down_pages::before {
		content: '';
		display: block;
		position: absolute;
		top: -15rpx;
		right: -3rpx;
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		border-right: 30rpx solid transparent;
		border-bottom: 30rpx solid #4C4C4C;
	}
	/*  */
	/* #ifdef APP || H5 */
	.d-kuan-baifen-70-cm {
		width: 100%;
	}
	/* #endif */
	/* #ifdef MP */
	.d-kuan-baifen-70-cm {
		width: 70%;
	}
	/* #endif */
</style>